/**
 * @author zhangqiang
 * @date   17/7/20
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'
import {Progress} from '../../components/common/process'
import config from '../../config'
import {Toast,Modal} from 'antd-mobile'
import {cancelOrder} from '../../actions/paymentActions'
import {Title} from '../../components/common'
import '../../../styles/payment.scss'
import common from '../../utils/common'
import style from './index.scss'

const alert = Modal.alert, repeat = null;

class Payment extends Component {
	constructor(props) {
		super(props);
		this.state={
			codeSetColour: true,
			orderId: '',
			contactName: '',
			cellNum: '',
			fullAddr: '',
			goodsTypeName: '',
			sendTypeName: '',
			timeDiffer: '',
		}
		this.orderId = this.props.params.orderId
		this.chargeOrderId = this.props.params.chargeOrderId
	}

	componentWillMount() {
		
	}
	componentDidMount() {
		common.setViewTitle('呼叫快递员上门');
		let cacheOrderPay = JSON.parse(sessionStorage.getItem('cacheOrderPay')); //下单成功后的信息

		this.setState({
			orderId: this.orderId,
			contactName: cacheOrderPay['address.contactName'],
			cellNum: cacheOrderPay['address.cellNum'],
			fullAddr: cacheOrderPay['address.fullAddr'],
			goodsTypeName: cacheOrderPay.goodsTypeName,
			sendTypeName: cacheOrderPay.sendTypeName,
			timeDiffer: "(" + cacheOrderPay.timeDiffer + ")" + "取消订单",
		})
		if (cacheOrderPay.timeDiffer > 0) {
			let second = cacheOrderPay.timeDiffer; //用来记录秒
			console.log(second)
			let that = this,
			repeat = setInterval(()=>{
				second--;
				let btnText = '('+second +')'+ '取消订单'; //显示时间
				that.setState({
					timeDiffer: btnText
				});
				if (second == 0) {
					btnText = "取消订单";
					clearInterval(repeat);
					that.setState({
						timeDiffer: btnText,
						codeSetColour: false
					});
				} //到过60秒时停止
			}, 1000); //每1000毫秒即1秒执行一次此函数
		}
	}

	componentWillUnmount() {
		clearInterval(repeat);
	}

	toUrl(url) {
		this.context.router.replace(url);
  	}
	//倒计时
	countDown(result){
		if(!this.state.codeSetColour) return 

		let postData = {
			orderId: this.orderId,
			chargeOrderId: this.chargeOrderId,
			payType: 0
		}
		this.props.dispatch(cancelOrder(postData, (resultData) => {
			Toast.info('已成功取消订单',1);
			setTimeout(()=>{
				this.toUrl('/')
			},1000)
		}))
	}

	render() {
		let { sendTypeName, goodsTypeName, codeSetColour, timeDiffer, contactName, cellNum, fullAddr } = this.state;
		return (
			<div className={style.payment}>
				{/*订单状态-start-*/}
				<div className={style.stateOperation}>
					<div className={style.stateImg}>
						<img src="./images/choice.png" alt=""/>
					</div>
					<div className={style.explain}>
						<span>已成功提交订单 <br/>请等待上门收件</span>
					</div>
					<div className={style.operationButton}>
						<button type='button' onClick={e => this.countDown()} style={!codeSetColour?{color: '#ababab',border: '1PX solid #ababab'}:{}}>{timeDiffer}</button>
						<button type='button' onClick={e => this.toUrl(`orderDetails/${this.orderId}/${this.chargeOrderId}`)}>查看订单</button>
					</div>
				</div>
				{/*订单状态-end-*/}
				<div style={{height: '.24rem'}}></div>
				{/*详情-start-*/}
				<div className={style.details}>
					<Title text='上门揽件信息' isLine={true} bgColor={'#f2f2f2'}/>
					<div className={style.information}>
						<div className={style.name}>{contactName}  {cellNum}</div>
						<div className={style.location}>{fullAddr}</div>
					</div>
					<Title text='寄递信息' isLine={true} bgColor={'#f2f2f2'}/>
					<div className={style.information}>
						<div className={style.goodsType}>
							<span>寄递类型</span>
							<span>{sendTypeName}</span>
						</div>
						<div className={style.goodsType}>
							<span>寄托物品</span>
							<span>{goodsTypeName}</span>
						</div>
					</div>
				</div>
				{/*详情-end-*/}
			</div>
		)
    }
}

//使用context
Payment.contextTypes = {
    router: React.PropTypes.object.isRequired
};

Payment.defaultProps = {
	payTypes: [
		{
			name: 'alipay',
			title: '支付宝支付',
			icon: './images/alipay-icon.png',
			type: '2',
		},
		{
			name: 'weixin',
			title: "微信支付",
			icon: './images/weixin-icon.png',
			type: '3',
		}
	],
};

function mapStateToProps(state) {
	return Object.assign({}, state.homeInfo);
}

export default connect(mapStateToProps)(Payment);
